<template>
  <div id="wrap">
    <div id="content">
      <div class="inner pr">
        <div class="con_bg">
          <div class="section3">
            <div class="u_fr">
              <div class="ui_base u_p3d">
                <div class="ball_c"></div>
                <div class="base u_p3d">
                  <div class="ball_base u_p3d ball_1">
                    <div class="ball">
                      <router-link to="/detail/0">
                        <img src="../assets/image/1.jpg" alt="" />
                      </router-link>
                    </div>
                  </div>
                  <div class="ball_base u_p3d ball_2">
                    <div class="ball">
                      <router-link to="/detail/1">
                        <img src="../assets/image/2.jpg" alt="" />
                      </router-link>
                    </div>
                  </div>
                  <div class="ball_base u_p3d ball_3">
                    <div class="ball">
                      <router-link to="/detail/2">
                        <img src="../assets/image/3.jpg" alt="" />
                      </router-link>
                    </div>
                  </div>
                  <div class="ball_base u_p3d ball_4">
                    <div class="ball">
                      <router-link to="/detail/3">
                        <img src="../assets/image/4.png" alt="" />
                      </router-link>
                    </div>
                  </div>
                  <div class="ball_base u_p3d ball_5">
                    <div class="ball">
                      <router-link to="/detail/4">
                        <img src="../assets/image/5.jpg" alt="" />
                      </router-link>
                    </div>
                  </div>
                  <div class="ball_base u_p3d ball_6">
                    <div class="ball">
                      <router-link to="/detail/5">
                        <img src="../assets/image/6.jpg" alt="" />
                      </router-link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$parent.$emit('view')
  }
};
</script>

<style lang="scss" scoped>
@charset "utf-8";

.center {
  width: 100%;
  padding-top: 0;
}

.center ul li {
  float: left;
  position: relative;
}

.ball_base {
  cursor: pointer;
  img {
    border-radius: 50%;
  }
}

.top3,
.top2 {
  margin-left: 30px;
  line-height: 52px;
  color: #fff;
  font-family: "微软雅黑";
}

.top2 {
  position: relative;
  margin-top: 15px;
  font-size: 12px;
  font-weight: normal;
  background-image: url(/app/article/images/view-erweima.png);
  background-repeat: no-repeat;
  background-position: 3px center;
  height: 22px;
  padding-left: 25px;
  line-height: 22px;
  border: 1px solid #bbb;
  padding-right: 5px;
  border-radius: 3px;
}

.top2 .vm p {
  color: #808080;
  margin: 7px 0 0 0;
  text-align: center;
}

.vm {
  position: absolute;
  top: 22px;
  left: -1px;
  background-color: #fff;
  height: 170px;
  width: 150px;
  display: none;
  padding: 30px;
}

.top2:hover .vm {
  display: block;
}

.top3 a:hover {
  text-decoration: none;
}

li.top4 a,
li.top5 a,
li.top6 a {
  font-size: 13px;
}

li.top4 {
  float: right !important;
  margin-right: 30px;
  line-height: 52px;
}

li.top4 a {
  color: #f8bc06;
}

li.top5 {
  float: right !important;
  margin-left: 12px;
  margin-right: 12px;
  color: #fff;
  font-size: 13px;
  line-height: 52px;
}

li.top6 {
  float: right !important;
  line-height: 52px;
  color: #fff;
  font-size: 14px;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

.wrap {
  line-height: 1;
  color: #3e3a39;
  background: url(../assets/image/bg.png) no-repeat top left / 100% 100% !important;
}
/*文字排版*/
.f12 {
  font-size: 12px;
}
.f14 {
  font-size: 14px;
}
.f15 {
  font-size: 15px;
}
.f16 {
  font-size: 16px;
}
.f18 {
  font-size: 18px;
}
.f20 {
  font-size: 20px;
}
.f22 {
  font-size: 22px;
}
.fb {
  font-weight: bold;
}
.fn {
  font-weight: normal;
}
.lh100 {
  line-height: 100%;
}
.lh150 {
  line-height: 150%;
}
.lh180 {
  line-height: 180%;
}
.lh200 {
  line-height: 200%;
}
.unl {
  text-decoration: underline;
}
.vam {
  vertical-align: middle;
}
.indent {
  text-indent: -9999px;
}
.bn {
  border: 0;
}
.pic {
  float: left;
}
.info {
  display: table-cell;
  zoom: 1;
}
.yahei {
  font-family: "Microsoft YaHei", "YouYuan";
}
.pr {
  position: relative;
}
.pa {
  position: absolute;
}
.pf {
  position: fixed;
}
/*清除浮动*/
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  zoom: 1; /* IE < 8 */
}
/*定位*/
.tl {
  text-align: left;
}
.tc {
  text-align: center;
}
.tr {
  text-align: right;
}
.bc {
  margin-left: auto;
  margin-right: auto;
}
.fl {
  float: left;
  display: inline;
}
.fr {
  float: right;
  display: inline;
}
.zoom {
  zoom: 1;
}
.none {
  display: none;
}
.bnone {
  backgrond: none;
}
/*外边距*/
.m0 {
  margin: 0 auto;
}
.m5 {
  margin: 5px;
}
.m10 {
  margin: 10px;
}
.m15 {
  margin: 15px;
}
.m20 {
  margin: 20px;
}
.mt5 {
  margin-top: 5px;
}
.mt10 {
  margin-top: 10px;
}
.mt15 {
  margin-top: 15px;
}
.mt20 {
  margin-top: 20px;
}
.mt40 {
  margin-top: 40px;
}
.mr5 {
  margin-right: 5px;
}
.mr10 {
  margin-right: 10px;
}
.mr15 {
  margin-right: 15px;
}
.mr20 {
  margin-right: 20px;
}
.mr30 {
  margin-right: 30px;
}
.ml20 {
  margin-left: 20px;
}
.mb5 {
  margin-bottom: 5px;
}
.mb10 {
  margin-bottom: 10px;
}
.mb15 {
  margin-bottom: 15px;
}
.mb20 {
  margin-bottom: 20px;
}
.mb25 {
  margin-bottom: 25px;
}
.mb40 {
  margin-bottom: 40px;
}
.ml5 {
  margin-left: 5px;
}
.ml10 {
  margin-left: 10px;
}
.ml15 {
  margin-left: 15px;
}
.ml18 {
  margin-left: 18px;
}
.ml20 {
  margin-left: 20px;
}
.ml25 {
  margin-left: 25px;
}
.ml50 {
  margin-left: 50px;
}
.ml30 {
  margin-left: 30px;
}
/*内边距*/
.p0 {
  padding: 0px;
}
.p5 {
  padding: 5px;
}
.p10 {
  padding: 10px;
}
.p15 {
  padding: 15px;
}
.p20 {
  padding: 20px;
}
.p32 {
  padding: 32px;
}
.p26 {
  padding: 26px;
}
.pt5 {
  padding-top: 5px;
}
.pt10 {
  padding-top: 10px;
}
.pt15 {
  padding-top: 15px;
}
.pt20 {
  padding-top: 20px;
}
.pt25 {
  padding-top: 25px;
}
.pt30 {
  padding-top: 30px;
}
.pt32 {
  padding-top: 32px;
}
.pt45 {
  padding-top: 45px;
}
.pr5 {
  padding-right: 5px;
}
.pr10 {
  padding-right: 10px;
}
.pr15 {
  padding-right: 15px;
}
.pr20 {
  padding-right: 20px;
}
.pb5 {
  padding-bottom: 5px;
}
.pb8 {
  padding-bottom: 8px;
}
.pb10 {
  padding-bottom: 10px;
}
.pb15 {
  padding-bottom: 15px;
}
.pb20 {
  padding-bottom: 20px;
}
.pl5 {
  padding-left: 5px;
}
.pl10 {
  padding-left: 10px;
}
.pl15 {
  padding-left: 15px;
}
.pl20 {
  padding-left: 20px;
}
.pl25 {
  padding-left: 25px;
}
.pl40 {
  padding-left: 40px;
}
.hd {
  overflow: hidden;
}

/*旋转部分、、、、、、、、、、、、、、、、、、、、、、、、、、*/
.section3 {
  width: 100rem;
  height: 68rem;
  margin: 0 auto;
  padding-top: 13rem;
}

.u_p3d {
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.section3 .ui_base {
  position: relative;
  top: 90px;
  left: 280px;
  width: 400px;
  height: 0px;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -ms-perspective: 1000px;
  -o-perspective: 1000px;
  perspective: 1000px;
  -webkit-perspective-origin: 50% 0%;
  -moz-perspective-origin: 50% 0%;
  -o-perspective-origin: 50% 0%;
  -ms-perspective-origin: 50% 0%;
  perspective-origin: 50% 0%;
}

.section3 .ball_c {
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  position: absolute;
  width: 225px;
  height: 157px;
  line-height: 157px;
  text-align: center;
  left: 90px;
  top: 100px;
}

.section3 .ball_c img {
  width: 125px;
  height: 125px;
  border-radius: 10px;
}

.section3 .ball_c p {
  margin-top: -70px;
}

.section3 .ball_c p a {
  font-size: 19px;
  font-family: "";
}

.section3 .base {
  -webkit-transform: rotateX(80deg) rotateY(-10deg);
  -moz-transform: rotateX(80deg) rotateY(-10deg);
  -o-transform: rotateX(80deg) rotateY(-10deg);
  -ms-transform: rotateX(80deg) rotateY(-10deg);
  transform: rotateX(80deg) rotateY(-10deg);
  position: relative;
  width: 350px;
  height: 350px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  top: -38px;
  left: 40px;
}

.section3 .ball_base {
  -webkit-transform-origin: 225px 0px;
  -moz-transform-origin: 225px 0px;
  -ms-transform-origin: 225px 0px;
  -o-transform-origin: 225px 0px;
  transform-origin: 225px 0px;
  position: absolute;
  top: 175px;
  left: -50px;
  width: 225px;
  height: 127px;
}

.section3 .ball_1 {
  -webkit-transform: rotateX(-90deg) rotateY(0deg) translateY(-70px);
  -o-transform: rotateX(-90deg) rotateY(0deg) translateY(-70px);
  -moz-transform: rotateX(-90deg) rotateY(0deg) translateY(-70px);
  -ms-transform: rotateX(-90deg) rotateY(0deg) translateY(-70px);
  transform: rotateX(-90deg) rotateY(0deg) translateY(-70px);
}

.section3 .ball_2 {
  -webkit-transform: rotateX(-90deg) rotateY(60deg) translateY(-70px);
  -moz-transform: rotateX(-90deg) rotateY(60deg) translateY(-70px);
  -o-transform: rotateX(-90deg) rotateY(60deg) translateY(-70px);
  -ms-transform: rotateX(-90deg) rotateY(60deg) translateY(-70px);
  transform: rotateX(-90deg) rotateY(60deg) translateY(-70px);
}

.section3 .ball_3 {
  -webkit-transform: rotateX(-90deg) rotateY(120deg) translateY(-70px);
  -o-transform: rotateX(-90deg) rotateY(120deg) translateY(-70px);
  -ms-transform: rotateX(-90deg) rotateY(120deg) translateY(-70px);
  -moz-transform: rotateX(-90deg) rotateY(120deg) translateY(-70px);
  transform: rotateX(-90deg) rotateY(120deg) translateY(-70px);
}

.section3 .ball_4 {
  -webkit-transform: rotateX(-90deg) rotateY(180deg) translateY(-70px);
  -moz-transform: rotateX(-90deg) rotateY(180deg) translateY(-70px);
  -ms-transform: rotateX(-90deg) rotateY(180deg) translateY(-70px);
  -o-transform: rotateX(-90deg) rotateY(180deg) translateY(-70px);
  transform: rotateX(-90deg) rotateY(180deg) translateY(-70px);
}

.section3 .ball_5 {
  -webkit-transform: rotateX(-90deg) rotateY(240deg) translateY(-70px);
  -moz-transform: rotateX(-90deg) rotateY(240deg) translateY(-70px);
  -o-transform: rotateX(-90deg) rotateY(240deg) translateY(-70px);
  -ms-transform: rotateX(-90deg) rotateY(240deg) translateY(-70px);
  transform: rotateX(-90deg) rotateY(240deg) translateY(-70px);
}

.section3 .ball_6 {
  -webkit-transform: rotateX(-90deg) rotateY(300deg) translateY(-70px);
  -ms-transform: rotateX(-90deg) rotateY(300deg) translateY(-70px);
  -o-transform: rotateX(-90deg) rotateY(300deg) translateY(-70px);
  -moz-transform: rotateX(-90deg) rotateY(300deg) translateY(-70px);
  transform: rotateX(-90deg) rotateY(300deg) translateY(-70px);
}

.section3 .ball_1 .ball {
  -webkit-transform: rotateY(10deg) rotateZ(10deg);
  -moz-transform: rotateY(10deg) rotateZ(10deg);
  -o-transform: rotateY(10deg) rotateZ(10deg);
  -ms-transform: rotateY(10deg) rotateZ(10deg);
  transform: rotateY(10deg) rotateZ(10deg);
}

.section3 .ball_2 .ball {
  -webkit-transform: rotateY(-50deg) rotateZ(10deg);
  -o-transform: rotateY(-50deg) rotateZ(10deg);
  -ms-transform: rotateY(-50deg) rotateZ(10deg);
  -moz-transform: rotateY(-50deg) rotateZ(10deg);
  transform: rotateY(-50deg) rotateZ(10deg);
}

.section3 .ball_3 .ball {
  -webkit-transform: rotateY(-110deg) rotateZ(10deg);
  -o-transform: rotateY(-110deg) rotateZ(10deg);
  -moz-transform: rotateY(-110deg) rotateZ(10deg);
  -ms-transform: rotateY(-110deg) rotateZ(10deg);
  transform: rotateY(-110deg) rotateZ(10deg);
}

.section3 .ball_4 .ball {
  -webkit-transform: rotateY(-170deg) rotateZ(10deg);
  -o-transform: rotateY(-170deg) rotateZ(10deg);
  -moz-transform: rotateY(-170deg) rotateZ(10deg);
  -ms-transform: rotateY(-170deg) rotateZ(10deg);
  transform: rotateY(-170deg) rotateZ(10deg);
}

.section3 .ball_5 .ball {
  -webkit-transform: rotateY(-230deg) rotateZ(10deg);
  -o-transform: rotateY(-230deg) rotateZ(10deg);
  -moz-transform: rotateY(-230deg) rotateZ(10deg);
  -ms-transform: rotateY(-230deg) rotateZ(10deg);
  transform: rotateY(-230deg) rotateZ(10deg);
}

.section3 .ball_6 .ball {
  -webkit-transform: rotateY(-290deg) rotateZ(10deg);
  -o-transform: rotateY(-290deg) rotateZ(10deg);
  -ms-transform: rotateY(-290deg) rotateZ(10deg);
  -moz-transform: rotateY(-290deg) rotateZ(10deg);
  transform: rotateY(-290deg) rotateZ(10deg);
}

.section3 .ball {
  -webkit-transition: all 2s ease-out 0ms;
  -o-transition: all 2s ease-out 0ms;
  -moz-transition: all 2s ease-out 0ms;
  -ms-transition: all 2s ease-out 0ms;
  transition: all 2s ease-out 0ms;
  -webkit-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  position: absolute;
  left: -200px;
  top: -30px;
  overflow: hidden;
}

.section3 .ball img {
  width: 110px;
  height: 110px;
}

.section3 .ball_1 .ball {
  -webkit-transition-delay: 1100ms;
  -o-transition-delay: 1100ms;
  -moz-transition-delay: 1100ms;
  -ms-transition-delay: 1100ms;
  transition-delay: 1100ms;
}

.section3 .ball_2 .ball {
  -webkit-transition-delay: 900ms;
  -moz-transition-delay: 900ms;
  -o-transition-delay: 900ms;
  -ms-transition-delay: 900ms;
  transition-delay: 900ms;
}

.section3 .ball_3 .ball {
  -webkit-transition-delay: 700ms;
  -o-transition-delay: 700ms;
  -ms-transition-delay: 700ms;
  -moz-transition-delay: 700ms;
  transition-delay: 700ms;
}

.section3 .ball_4 .ball {
  -webkit-transition-delay: 500ms;
  -o-transition-delay: 500ms;
  -ms-transition-delay: 500ms;
  -moz-transition-delay: 500ms;
  transition-delay: 500ms;
}

.section3 .ball_5 .ball {
  -webkit-transition-delay: 300ms;
  -moz-transition-delay: 300ms;
  -ms-transition-delay: 300ms;
  -o-transition-delay: 300ms;
  transition-delay: 300ms;
}

.section3 .ball_6 .ball {
  -webkit-transition-delay: 100ms;
  -o-transition-delay: 100ms;
  -ms-transition-delay: 100ms;
  -moz-transition-delay: 100ms;
  transition-delay: 100ms;
}

.section3 .ball_1 .ball {
  -webkit-animation: cir1 28s linear 0s infinite;
  -o-animation: cir1 28s linear 0s infinite;
  -ms-animation: cir1 28s linear 0s infinite;
  -moz-animation: cir1 28s linear 0s infinite;
  animation: cir1 28s linear 0s infinite;
}

.section3 .ball_2 .ball {
  -webkit-animation: cir2 28s linear 0s infinite;
  -o-animation: cir2 28s linear 0s infinite;
  -ms-animation: cir2 28s linear 0s infinite;
  -moz-animation: cir2 28s linear 0s infinite;
  animation: cir2 28s linear 0s infinite;
}

.section3 .ball_3 .ball {
  -webkit-animation: cir3 28s linear 0s infinite;
  -o-animation: cir3 28s linear 0s infinite;
  -ms-animation: cir3 28s linear 0s infinite;
  -moz-animation: cir3 28s linear 0s infinite;
  animation: cir3 28s linear 0s infinite;
}

.section3 .ball_4 .ball {
  -webkit-animation: cir4 28s linear 0s infinite;
  -o-animation: cir4 28s linear 0s infinite;
  -ms-animation: cir4 28s linear 0s infinite;
  -moz-animation: cir4 28s linear 0s infinite;
  animation: cir4 28s linear 0s infinite;
}

.section3 .ball_5 .ball {
  -webkit-animation: cir5 28s linear 0s infinite;
  -o-animation: cir5 28s linear 0s infinite;
  -ms-animation: cir5 28s linear 0s infinite;
  -moz-animation: cir5 28s linear 0s infinite;
  animation: cir5 28s linear 0s infinite;
}

.section3 .ball_6 .ball {
  -webkit-animation: cir6 28s linear 0s infinite;
  -o-animation: cir6 28s linear 0s infinite;
  -ms-animation: cir6 28s linear 0s infinite;
  -moz-animation: cir6 28s linear 0s infinite;
  animation: cir6 28s linear 0s infinite;
}

.section3 .base {
  -webkit-animation: cir 28s linear 0s infinite;
  -o-animation: cir 28s linear 0s infinite;
  -ms-animation: cir 28s linear 0s infinite;
  -mozanimation: cir 28s linear 0s infinite;
  animation: cir 28s linear 0s infinite;
}

@-webkit-keyframes cir1 {
  0% {
    -webkit-transform: rotateY(0deg) rotateZ(10deg);
  }
  100% {
    -webkit-transform: rotateY(-360deg) rotateZ(10deg);
  }
}

@keyframes cir1 {
  0% {
    transform: rotateY(0deg) rotateZ(10deg);
  }
  100% {
    transform: rotateY(-360deg) rotateZ(10deg);
  }
}

@-webkit-keyframes cir2 {
  0% {
    -webkit-transform: rotateY(-60deg) rotateZ(10deg);
  }
  100% {
    -webkit-transform: rotateY(-420deg) rotateZ(10deg);
  }
}

@keyframes cir2 {
  0% {
    transform: rotateY(-60deg) rotateZ(10deg);
  }
  100% {
    transform: rotateY(-420deg) rotateZ(10deg);
  }
}

@-webkit-keyframes cir3 {
  0% {
    -webkit-transform: rotateY(-120deg) rotateZ(10deg);
  }
  100% {
    -webkit-transform: rotateY(-480deg) rotateZ(10deg);
  }
}

@keyframes cir3 {
  0% {
    transform: rotateY(-120deg) rotateZ(10deg);
  }
  100% {
    transform: rotateY(-480deg) rotateZ(10deg);
  }
}

@-webkit-keyframes cir4 {
  0% {
    -webkit-transform: rotateY(-180deg) rotateZ(10deg);
  }
  100% {
    -webkit-transform: rotateY(-540deg) rotateZ(10deg);
  }
}

@keyframes cir4 {
  0% {
    transform: rotateY(-180deg) rotateZ(10deg);
  }
  100% {
    transform: rotateY(-540deg) rotateZ(10deg);
  }
}

@-webkit-keyframes cir5 {
  0% {
    -webkit-transform: rotateY(-240deg) rotateZ(10deg);
  }
  100% {
    -webkit-transform: rotateY(-600deg) rotateZ(10deg);
  }
}

@keyframes cir5 {
  0% {
    transform: rotateY(-240deg) rotateZ(10deg);
  }
  100% {
    transform: rotateY(-600deg) rotateZ(10deg);
  }
}

@-webkit-keyframes cir6 {
  0% {
    -webkit-transform: rotateY(-300deg) rotateZ(10deg);
  }
  100% {
    -webkit-transform: rotateY(-660deg) rotateZ(10deg);
  }
}

@keyframes cir6 {
  0% {
    transform: rotateY(-300deg) rotateZ(10deg);
  }
  100% {
    transform: rotateY(-660deg) rotateZ(10deg);
  }
}

@keyframes cir {
  0% {
    transform: rotateX(80deg) rotateY(-10deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(80deg) rotateY(-10deg) rotateZ(-360deg);
  }
}

@-webkit-keyframes cir {
  0% {
    -webkit-transform: rotateX(80deg) rotateY(-10deg) rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateX(80deg) rotateY(-10deg) rotateZ(-360deg);
  }
}
</style>